:root {
  --primary-color: #31c27c;          
  /* 伪类，相当于全局的属性，表示要选择的元素状态的基本色为#31c27c这个颜色 */
}
body {
  margin: 0;
  /* 盒子外边距设置为0 */
  background: #f5f5f5;
  /* 背景色设置为#f5f5f5这个颜色 */
  font-family: Microsoft Yahei;
  /* 元素字体系列为：Microsoft Yahei */
  font-size: 14px;
  /* min-width: 1000px; */
  /* 字体大小为：14px */
}
a {
  /* a标签超链接的样式 */
  text-decoration: none;
  /* 文本修饰：无 ，主要是为了消除超链接的下划线*/
  color: #000;
  /* 颜色为#000这个颜色 */
}
header {
  /* header标签，类似于页眉 */
  height: 90px;
/* 高度为：90px */
  background: white;
  /* 背景为白色 */
  display: flex;
  /* 弹性布局，将对象作为弹性伸缩盒显示 确定对齐方式*/
  align-items: center;
  /* 设置交叉轴对齐方式为居中 */
}
.header-inner, main {
  /* class属性为header-inner和main的样式 */
  /* width: 1200px; */
  padding: 20px;
  /* 内边距为：20px */
  margin: auto;
  /* 外边距：自动 */
}
.tag-list {
  /* class属性为tag-list的样式 */
  margin-top: 50px;
  /* 上外边距为：50px */
  margin-bottom: 15px;
  /* 下外边距为：15px */
}
.tag-item {
  /* class属性为tag-item的样式 */
  display: inline-block;
  /* 元素显示的位置方式 让其成为块级元素*/
  padding: 0 8px;
/* 内边距为：0 8px */
  margin-right: 24px;
  /* 右外边距为：24px */
  line-height: 26px;
  /* 行高为：26px */
  color: #000;
  /* 颜色为#000此颜色 */
  text-decoration: none;
  /* 文本修饰：无 */
}
.tag-active {
  /* class属性为tag-active的样式 */
  background: var(--primary-color);
  /* 背景色为primary-color的颜色 */
  color: white;
  /* 颜色为白色 */
}
.tag-item:not(.tag-active):hover {
  /* class为tag-item的结构化，鼠标悬浮时 */
  color: var(--primary-color);
  /* 颜色为上述root伪类里面的颜色 */
}
.nowrap {
  /* class属性为nowrap的样式 */
  white-space: nowrap;
  /* 除非遇到换行标签，否则不换行 */
  overflow: hidden;
  /* 当前元素内容溢出时，隐藏溢出的值 */
  text-overflow: ellipsis;
  /* 超出文字隐藏 */
}
.playlist {
  /* class为playlist的样式 */
  display: grid;
  /* 网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  /* 网格的属性：使所有列都能保持灵活性但始终保持一个 200px 的最小值，至少有200px最大 1fr 的列 */
  gap: 45px 15px;
  /* 网格行与列之间的间隙 */
  margin-bottom: 45px;
  /* 底外边距为：45px */
}
.cover-wrap {
  /* class属性为cover-wrap的属性 */
  display: flex;
   /* 弹性布局，将对象作为弹性伸缩盒显示 主要用于对齐方式 */
  position: relative;
  /* 定位类型为相对定位 用于定位，相对于他原本的位置定位*/
  overflow: hidden;
  /* 内容溢出值隐藏 */
  width: 100%;
  /* 宽度100% */
  margin-bottom: 15px;
  /* 底外边距15px */
  align-items: center;
   /* 设置交叉轴对齐方式为居中 */
  justify-content: center;
  /* 内容中间对齐 */
  cursor: pointer;
  /* 将光标转换为指示的小手 */
}
.cover-img {
  /* class为cover-img的样式属性 */
  width: 100%;
  /* 宽度100% */
  transition: all 0.75s;
  /* 过度变化用0.75s完成 */
}
.cover-mask {
  position: absolute;
  /* 绝对定位 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* 元素的上下左右边缘为0 */
  background: #000;
  /* 背景色为黑色 */
  opacity: 0;
  /* 不透明度为0 */
  transition: all 0.5s;
  /* 过度变化用0.5秒完成 */
}
.cover-play {
  /* class为cover-play的属性 */
  position: absolute;
  /* 位置的绝对定位 将盒子浮动出 */
  left: 50%;
  /* 元素左边缘50% */
  top: 50%;
  /* 上边缘50% */
  margin-left: -35px;
  /* 左边距-35px */
  margin-top: -35px;
  /* 上边距-35px */
  opacity: 0;
  /* 不透明度0 */
  transform: scale(0.7);
  /* x轴缩放元素 */
  transition: all 0.5s;
  /* 变化时间用时0.5秒 */
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2;
  /* cover-wrap的鼠标悬浮和cover-mask属性值 */
  /* 不透明度为0.2 */
}
.cover-wrap:hover .cover-play {
  opacity: 1;
  transform: scale(1);
   /* cover-wrap的鼠标悬浮和cover-play属性值 */
  /* 不透明度为1 */
  /* x轴缩放 */
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07);
  /* cover-wrap的鼠标悬浮和cover-img属性值 */
  /* x轴缩放 */
}
.album-title:hover {
  /* class值为album-title的鼠标悬浮时颜色变化为root伪类设置的颜色 */
  color: var(--primary-color);
}
.album-author {
  /* class值为album-author的颜色为#999,且行高为1.6 */
  color: #999;
  line-height: 1.6;
}
.album-author:hover {
  /* class值为album-author的鼠标悬浮时颜色变化为root伪类设置的颜色 */
  color: var(--primary-color);
}
.album-time {
  /* class值为album-time的颜色值为#999 */
  color: #999;
}
.page {
  /* class值为page的属性 */
  display: flex;
  /* 弹性布局，将对象作为弹性伸缩盒显示 方便对齐*/
  align-items: center;
  /* 设置交叉轴对齐方式为居中 */
  justify-content: center;
  /* 内容中间对齐 */

}
.page-item {
  display: inline-block;
  /* 元素显示的位置方式 设置为块级元素*/
  color: #a2a2a2;
  /* 颜色为#a2a2a2 */
  line-height: 50px;
  /* 行高为：50px */
  padding: 0 20px;
  /* 内边距为0 20px */
  margin: 10px;
  /* 外边距为10px */
  font-size: 16px;
  /* 字体大小为16px */
}
.page-current, .page-item:not(.page-more):hover {
  background: var(--primary-color);
  /* 背景色为root设置的背景色 */
  color: white;
  /* 颜色为白色 */
}
footer 
/* 页脚标签 */
{
  /* 上边距为60px */
  margin-top: 60px;
  background: #333;
  /* 背景色为#333 */
  height: 200px;
  /* 高度为200px */
}


